<template>
    <div class="container">
        <el-row>
        <el-col :span="2"></el-col>
        <el-col :span="12">
            <img src="../../assets/img/bg.svg"  alt="" class="bg">
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="8" style="margin-top: 10%;">
            <div class="login_box">
                <div class="avatar_box">
                <img src="../../assets/img/logo.svg" alt="">
                </div>
                <el-form label-width="0" class="login_form">
                    <el-form-item>
                        <el-input size="large" :clearable="true" v-model="username" placeholder="用户名">
                            <template #prepend>
                                <el-button :icon="User" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-input size="large" :clearable="true" v-model="password" :show-password="true" type="password" placeholder="密码">
                            <template #prepend> 
                                <el-button :icon="Lock" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="btns" style="margin-top: 20px;">
                        <el-button type="primary" @click="login" >登录</el-button>
                        <el-button type="info" @click="handlerEmpty">重置</el-button>
                        <el-button type="warning"  @click="toRegister" style="margin-left: 212px;">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
        </el-row>
    </div>
</template>
<script>
    import {ref} from 'vue'
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    import {User,Lock} from '@element-plus/icons-vue'
    export default{
        name:'UserLogin',
        setup() {
            let username = ref('');
            let password = ref('');
            const icon = {User,Lock};
            const router = useRouter();
            const store = useStore();
            const handlerEmpty = function(){
                username.value = "",
                password.value = ""
            }
            const toRegister = function (){
                router.push({
                    path:'/register'
                })
            }
            let login = function(){
                store.dispatch('login',{
                    username:username.value,
                    password:password.value,
                })
            }
            return {
                ...icon,
                username,
                password,
                handlerEmpty,
                toRegister,
                login
            }
        },
    }
</script>
<style scoped> 
    .container{ 
        width: 100vw;
        height: 100vh;
        background-color:  #a0cfff;
    }
    .bg{
        height: 90vh;
    }
    .login_box{
        width: 450px;
        height: 300px;
        background-color: rgba(36, 223, 244, 0.9);
        border-radius: 3px;
        position: relative;
        border-radius: 5%;
        border: 3px solid rgb(8, 182, 217);
        top: 50px;
        left: -50px;
        text-align: center;
  }

    .avatar_box{
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left:50%;
        transform: translate(-50%,-50%);
        background-color: rgb(228, 193, 193);
    }

    .avatar_box img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

</style>